<template lang="html">
  <div class="musicTable">
    <div class="musicLeft">
      <ul>
        <li v-for="(item,index) in title.musicTable"><a href="#">{{ item.title }}</a></li>
      </ul>
    </div>
    <div class="musicRight">
       <ul>
        <li v-for="(item,index) in title2.leixing1 "><a href="#">{{item.title}}</a></li>
      </ul>
      <ul>
        <li v-for="(item,index) in title2.leixing2 "><a href="#">{{item.title}}</a></li>
      </ul>
      <ul>
      <li v-for="(item,index) in title2.leixing3 "><a href="#">{{item.title}}</a></li>
      </ul>
    </div>
    <div class="qingchu">

    </div>
    <p>
      查看更多》
    </p>

    <!-- <div class="musicHr">

    </div> -->
  </div>
</template>

<script>
export default {
  name:"musicTable",
  data(){
    return{
     title:{
       musicTable:[]
     },
     title2:{

     }
    }
  },
  created(){
    var tableURL = "http://localhost:8080/static/musicTable.json"
    // console.log(tableURL)
    // this.$axios.get(tableURL)
    this.$axios.get(tableURL)
    .then(res =>{
      this.title = res.data
    })
    .catch(error =>{
      console.log(error)
    })


    var tableJson2URL ="http://localhost:8080/static/musicTable2.json"
    this.$axios.get(tableJson2URL)
    .then(res =>{
      this.title2 = res.data
    })
    .catch(error =>{
      console.log(error)
    })
  }
}
</script>

<style scoped>
.musicTable{
  /* width: 100%; */
  /* height: 2.65rem; */
  padding-top: 0.6rem;
  padding-left: 0.2rem;
  background: #ffffff;


}
.musicLeft{
  float: left;
  width:20%;
  height: 100%;
  overflow: hidden;
}
.musicRight{
  float: left;
  width: 80%;
  height: 100%;
  overflow: hidden;
}
.musicLeft ul{
  display: block;
  width: 100%;
  height: 100%;
}
.musicLeft ul li{
  margin-bottom: 0.35rem;
}
.musicLeft ul li a {
  display: block;
  color: #333333;
  font-size: 0.38rem;
}
.musicRight ul{
  display: inline-block;
  width: 100%;
  margin-bottom: 0.35rem;

}
.musicRight ul li{
  float: left;
  margin-right: 0.45rem;
  color: #333333;
  font-size: 0.35rem;
}
.qingchu{
  clear: both;
}
.musicTable p{
  width: 100%;
  text-align: center;
  height: 0.7rem;
  line-height: 0.7rem;
  background: #ffffff;
  /* position: absolute;
  left: 0; */
  padding-bottom: 0.2rem;
}

</style>
